<script setup>
import { ref } from 'vue'
import CreditShopButton from '@/components/buttons/CreditShopButton.vue'
import GetCreditButton from '@/components/buttons/GetCreditButton.vue'
import { imagePath } from '@/utils/image'
import { shopItemService } from '@/services/shop_item'
import { userServie } from '@/services/user_service'
import { userManager } from '@/utils/user'
import { onMounted } from 'vue'
import { setShowModal } from '@/utils/eventBus'
import { ElMessage } from 'element-plus'
import { creditManager } from '@/utils/credit'
import {creditService} from '@/services/creditService'
import { rankManager } from '@/utils/rank'
import { methods } from '@/utils/methods'

const currentSlide = ref(0)
const slides = [
  { 
    title: '终身学习，成就未来', 
    desc: '积累知识，兑换奖励',
    bgColor: 'linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)',
    image: 'https://creditbank.oss-cn-chengdu.aliyuncs.com/2025/07/02/93dd5516-5617-4aa0-99a8-5d627604da46.png',
  },
  { 
    title: '新用户注册送100积分', 
    desc: '立即加入学习计划',
    bgColor: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    image: 'https://creditbank.oss-cn-chengdu.aliyuncs.com/2025/07/02/880ce76f-07a7-4c31-bf6b-eb7ba14a3186.png',
  },
  { 
    title: '限时特惠', 
    desc: '热门课程兑换5折',
    bgColor: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    image: 'https://creditbank.oss-cn-chengdu.aliyuncs.com/2025/07/02/dc7c33cd-8445-4c9d-a951-82eb366db02c.png',
  }
]
const products = ref([
  {
    id: "1",
    title: 'VIP会员月卡',
    price: 800,
    image: 'https://placeholder.pics/svg/150x150/DEDEDE/555555/VIP',
    inventory: 12,
    description: '享受30天VIP特权，无广告浏览'
  },
  {
    id: "2",
    title: 'VIP会员月卡',
    price: 800,
    image: 'https://placeholder.pics/svg/150x150/DEDEDE/555555/VIP',
    inventory: 12,
    description: '享受30天VIP特权，无广告浏览'
  },
])

shopItemService.getShopItems((res)=>{
  //console.log(res)
  //将结果的前四个赋值给products.value
  products.value = res.data.slice(0,4)
})

const rotateSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % slides.length
}

onMounted(() => {
  checkSignInStatus()


  if(userManager.getUserInfo()!=null)
     {
      creditService.getCreditSummary((res)=>{
        //console.log(res)
        creditManager.setTotalCredit(res.data.totalCredits)
        creditManager.setCurrentCredit(res.data.currentCredits)
        userPoints.value=creditManager.getCurrentCredit()
        totalPoints.value=creditManager.getTotalCredit()
        rankCredit.value=rankManager.getCreditByRank(totalPoints.value)
        leftRankCredit.value=rankManager.getRankLeftCredit(totalPoints.value)

        // console.log(rankCredit.value)
        // console.log(leftRankCredit.value)


      })
      creditService.getCreditRecord((res)=>{
        creditManager.setCreditRecord(res.data)
      })
      
      shopItemService.getShopItemHistory(userManager.getUserId(),(res)=>{
        shopItemService.setLocalHistoryShopItem(res.data)
      })
      
    }
})

setInterval(rotateSlide, 3000)
const userPoints = ref(100)
const totalPoints = ref(100)
const hasSignedIn = ref(false)
const signInPoints = ref(shopItemService.updateCreditNoMsg(10) ||0)
const rankCredit=ref(0)
const leftRankCredit=ref(0)
// console.log("等级学分:",rankCredit.value)
// console.log("等级剩余学分:",leftRankCredit.value)

const consecutiveDays = ref(0) // Track consecutive sign-in days
const handleSignIn = () => {
  if(userManager.getUserInfo() == null){
    setShowModal(true)
    ElMessage.error('请先登录')
    return  
  }
  userServie.signIn(userManager.getUserId(), (res) => {
    if (!hasSignedIn.value) {
      creditService.addNewCredit(10,null,methods.DAILY_CHECK_IN,userManager.getUserId(),(res)=>{
        console.log(res)
      })
      userPoints.value += signInPoints.value
      totalPoints.value += signInPoints.value
      hasSignedIn.value = true
      //获取今天的星期数
      let weekNum = new Date().getDay()
      if(weekNum==0)
      {
        weekNum=7
      }
      consecutiveDays.value = consecutiveDays.value+(1<<(weekNum-1))
      const btn = document.querySelector('.sign-in-btn')
      if (btn) {
        btn.classList.add('animate')
        setTimeout(() => btn.classList.remove('animate'), 1000)
      }
    }
  })
}
const checkSignInStatus = () => {
  if(userManager.getUserInfo() != null)
 {
    userServie.getSignInfo(userManager.getUserId(), (res) => {
    if (res.code === 1000) {
      
      const lastSignInDate = new Date(res.data.lastDay)
      const today = new Date()
      if(today-lastSignInDate>1000*60*60*24*7)
      {
        hasSignedIn.value = false
        consecutiveDays.value=0
      }
      else
      {
        var day=today.getDay()
      if(day ==0)
    {
      day=7
    }
      
      if (
        1<<(day-1) == (res.data.period & (1<<(day-1)))
      ) {
        hasSignedIn.value = true
      }
      consecutiveDays.value = res.data.period
        
      }



      
    }
  })
 }
}

const weekDays = [ '一', '二', '三', '四', '五', '六','日']

// 获取今天是星期几（0-6，0是周日）
var todayIndex = new Date().getDay()
 if(todayIndex==0)
{
   todayIndex=7
 }


// 检查某一天是否应该被点亮
const isDayActive = (index) => {
  //利用二级制的数判断某一天是否应该被点亮
  let weekNum = 1<<(index)
  return (consecutiveDays.value & weekNum) != 0
}

// 检查是否是今天
const isToday = (index) => {
  return index === todayIndex-1
}
</script>

<template>
  <div class="banner">
    <!-- 左侧积分商城预览 - 2x2网格 -->
    <div class="points-mall">
      <div class="section-header">
        <h3>积分商城</h3>
        <div class="header-decoration"></div>
      </div>
      <div class="mall-items-grid">
        <div class="mall-item" v-for="(product, index) in products" :key="index">
          <div class="item-image">
            <img :src="imagePath.getServerImagePath(product.image)" :alt="'商品'+(index+1)">
          </div>
          <div class="item-info">
            <span class="item-name">{{ product.title }}</span>
            <span class="item-points">{{ product.price }}积分</span>
          </div>
          
        </div>
      </div>
      <CreditShopButton />
    </div>
    
    <!-- 中间轮播图 -->
    <div class="carousel">
      <div 
        class="slide" 
        v-for="(slide, index) in slides" 
        :key="index"
        :style="{ 
          transform: `translateX(${(index - currentSlide) * 100}%)`,
          background: slide.bgColor
        }"
        v-show="index === currentSlide"
      >
        <div class="slide-content-wrapper">
          <div class="slide-content">
            <h2>{{ slide.title }}</h2>
            <p>{{ slide.desc }}</p>
          </div>
          <div class="slide-image">
            <img :src="imagePath.getServerImagePath(slide.image)" alt="Banner image">
          </div>
        </div>
      </div>
      <div class="carousel-dots">
        <span 
          v-for="(slide, index) in slides" 
          :key="index"
          :class="{ active: index === currentSlide }"
          @click="currentSlide = index"
        ></span>
      </div>
      <div class="carousel-decoration"></div>
    </div>
    
    <!-- 右侧区域 -->
    <div class="right-section">
      <!-- 独立签到区域 -->
      <div class="sign-in-card">
        <div class="section-header">
          <h3>每日签到</h3>
          <div class="header-decoration"></div>
        </div>
        <div class="sign-in-content">
          <button 
            class="sign-in-btn" 
            @click="handleSignIn"
            :class="{ signed: hasSignedIn }"
            :disabled="hasSignedIn"
          >

            <span class="btn-text">{{ hasSignedIn ? '今日已签到' : '点击签到' }}</span>
            <span class="points-badge" v-if="!hasSignedIn">+{{ signInPoints }}</span>
          </button>
          <div class="sign-in-tip" v-if="!hasSignedIn">
            <i class="icon-info">ℹ️</i> 每日签到可获得{{ signInPoints }}积分
          </div>
          <div class="sign-in-success" v-else>
            <i class="check-icon">✓</i> 已获得{{ signInPoints }}积分
          </div>
        </div>
        <div class="sign-in-calendar">
  <div class="calendar-day" 
       v-for="(day, index) in weekDays" 
       :key="index"
       :class="{ 
         active: isDayActive(index),
         today: isToday(index)
       }">
    {{ day }}
  </div>
</div>
</div>
      
      
      <!-- 我的学分区域 -->
      <div class="points-info">
  <div class="section-header">
    <h3>我的学分</h3>
    <div class="header-decoration"></div>
  </div>
  <div class="points-display" v-if="userManager.getUserInfo()">
    <div class="points-item">
      <span class="points-label">当前学分:</span>
      <span class="points-value">{{ userPoints }}</span>
    </div>
    <div class="points-item">
      <span class="points-label">累积学分:</span>
      <span class="points-value">{{ totalPoints }}</span>
    </div>
    <div class="points-progress">
      <div class="progress-bar" :style="{ width: ((rankCredit-leftRankCredit) / rankCredit * 100) + '%' }"></div>
      <span class="progress-text">再获{{ leftRankCredit}}积分升级</span>
    </div>
    <GetCreditButton />
  </div>
  <div class="login-prompt" v-else>
    <p>请登录查看学分</p>
  </div>
</div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.banner {
  margin: 0 auto;
  width: 100%;
  margin-top: 20px;
  background: #fff;
  color: #495057;
  display: flex;
  justify-content: space-between;
  padding: 25px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6a11cb, #2575fc, #f093fb, #f5576c, #43e97b, #38f9d7);
  z-index: 1;
}

.points-mall, .carousel, .right-section {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  flex: 1;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.points-mall:hover, .carousel:hover, .right-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.points-mall {
  max-width: 280px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.right-section {
  max-width: 220px;
  gap: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.carousel {
  position: relative;
  max-width: 700px;
  color: white;
  overflow: hidden;
  padding: 0;
  height: 100%;
  min-height: 400px;
}

.section-header {
  position: relative;
  margin-bottom: 20px;
  text-align: center;
}

.section-header h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #343a40;
  position: relative;
  display: inline-block;
  padding: 0 15px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
  border-radius: 20px;
}

.carousel .section-header h3 {
  color: white;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.header-decoration {
  height: 3px;
  background: linear-gradient(90deg, transparent, #adb5bd, transparent);
  margin-top: 8px;
  border-radius: 3px;
}

.carousel .header-decoration {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}

.slide {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  transition: all 0.5s ease;
  padding: 30px 20px;
}

.slide-content-wrapper {
  float: left;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}

.slide-content {
  width: 100%;
  padding: 20px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  backdrop-filter: blur(5px);
}

.slide-image {
  width: 100%;
  max-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  margin-top: auto;
}

.slide-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slide h2 {
  font-size: 26px;
  margin-bottom: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.slide p {
  font-size: 16px;
  opacity: 0.9;
  font-weight: 300;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  z-index: 3;
}

.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dots span.active {
  background-color: #fff;
  transform: scale(1.3);
  box-shadow: 0 0 5px rgba(255,255,255,0.8);
}

.carousel-decoration {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  z-index: 1;
}

.mall-items-grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  margin: 15px 0;
}

.mall-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  transition: all 0.3s;
  height: 100%;
  justify-content: center;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);
}

.mall-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
}

.item-image {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background-color: white;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.mall-item:hover .item-image {
  transform: scale(1.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.item-info {
  text-align: center;
  width: 100%;
}

.item-name {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #343a40;
}

.item-points {
  display: block;
  font-size: 13px;
  color: #ff6b6b;
  font-weight: bold;
  background: rgba(255, 107, 107, 0.1);
  padding: 3px 8px;
  border-radius: 10px;
  display: inline-block;
}

.item-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 10px;
}

.mall-item:hover .item-hover {
  opacity: 1;
}

.item-hover span {
  font-size: 13px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.2);
  border-radius: 15px;
}

.points-display {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.points-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  padding: 8px 10px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 8px;
  transition: all 0.3s;
}

.points-item:hover {
  background: rgba(255, 193, 7, 0.2);
  transform: translateX(3px);
}

.points-label {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
}

.points-value {
  font-size: 18px;
  font-weight: bold;
  color: #fdb102;
  text-shadow: 0 1px 2px rgba(253, 177, 2, 0.2);
}

.points-progress {
  margin: 15px 0;
  background: #e9ecef;
  height: 6px;
  border-radius: 3px;
  position: relative;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #fdb102, #ff6b6b);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-text {
  display: block;
  font-size: 11px;
  color: #6c757d;
  margin-top: 8px;
  text-align: center;
}

.sign-in-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);
}

.sign-in-content {
  margin: 15px 0;
}

.sign-in-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #04cff3 0%, #409EFF 100%);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 10px rgba(253, 177, 2, 0.3);
  font-size: 15px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.sign-in-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.1);
  transform: rotate(45deg);
  transition: all 0.3s;
  opacity: 0;
}

.sign-in-btn:hover:not(:disabled)::before {
  opacity: 1;
  animation: shine 1.5s infinite;
}

@keyframes shine {
  0% { left: -50%; }
  100% { left: 150%; }
}

.sign-in-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(253, 177, 2, 0.4);
}

.sign-in-btn:disabled {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  box-shadow: none;
}

.sign-in-btn.signed {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}

.sign-in-btn.animate {
  animation: pulse 0.5s ease;
}

.btn-text {
  position: relative;
  z-index: 1;
}

.points-badge {
  background: rgba(255,255,255,0.3);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-size: 13px;
  position: relative;
  z-index: 1;
}

.sign-in-tip {
  font-size: 13px;
  color: #6c757d;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-info {
  margin-right: 5px;
  font-size: 12px;
}

.sign-in-success {
  font-size: 14px;
  color: #28a745;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease;
}

.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: #28a745;
  color: white;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.sign-in-calendar {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding: 10px 0;
  border-top: 1px dashed #dee2e6;
}

.calendar-day {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #6c757d;
  transition: all 0.3s;
}

.calendar-day.active {
  background: #28a745;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

@media (max-width: 1200px) {
  .banner {
    flex-direction: column;
  }
  
  .points-mall, .carousel, .right-section {
    max-width: 100%;
    margin: 10px 0;
  }
  
  .right-section {
    flex-direction: row;
    gap: 15px;
  }
  
  .sign-in-card, .points-info {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .banner {
    padding: 15px;
  }
  
  .right-section {
    flex-direction: column;
  }
  
  .slide h2 {
    font-size: 22px;
  }
  
  .slide-image {
    max-height: 180px;
  }
  
  .slide-content {
    padding: 15px;
    margin-bottom: 15px;
  }

  .calendar-day {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #6c757d;
  transition: all 0.3s;
}

.calendar-day.active {
  background: #28a745;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.calendar-day.today {
  border: 2px solid #2575fc;
}

.calendar-day.today.active {
  border-color: white;
}

.login-prompt {
  text-align: center;
  padding: 20px 0;
}

.login-prompt p {
  color: #6c757d;
  margin-bottom: 15px;
  font-size: 14px;
}

.login-btn {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
}
</style>